<template>
    <div>
        <!-- 轮播图区域 -->
        <!-- 将来 谁使用此 轮播图组件，谁为我们传递lunbotuList -->
        <!-- 此时 lunbotuList 应该是 父组件向子组件传值来设置 -->
    <mt-swipe :show-indicators="false">
      <mt-swipe-item v-for="item in lunbotuList" :key="item.url">
        <img :src="item.img" alt="" :class="{'full':isfull}">
      </mt-swipe-item>
      
    </mt-swipe>
    </div>

<!--分析:为什么商品评论中的轮播图那么丑:-->
<!-- 1. 首页中的图片，它的宽和高，都是使用了100%的宽度-->
<!-- 2. 在商品详情页面中，轮播图的图片，如果也使用宽高为100%的话，页面不好看-->
<!-- 3. 商品详情页面中的轮播图，期望高度是100%，但是宽度为自适应-->
<!-- 4. 经过分析，得到问题的原因:首页中的轮福图和详情中的轮福图，分歧点是宽度到
底是100%还是自适应-->
<!-- 5. 既然这两个 轮播图，其他方面都是没有冲突的，只是 宽度有分歧，那么 
我们可以定义一个属性  让 使用轮播图的调用者， 手动指定 是否为 100% 的宽度-->

</template>

<script>
export default {
    // data(){
    //     return{}
    // },
    // created () {
    //     this.getLunbotu()
    // },
    // methods: {
    //     getLunbotu(){
    //          //获取轮播图数据的方法
    //   this.$http.get('api/getlunbo').then(
    //     result=>{
    //       // console.log(result.body);
    //       if(result.body.status===0){
    //         // 成功了
    //         this.lunbotuList=result.body.message;
    //         Toast('加载轮播图ok')
    //       }else{
    //         // 失败了
    //         Toast('加载轮播图失败')
    //       }
    //     }
    //   )}
    // },
    props: ["lunbotuList","isfull"]
}
</script>

<style lang="less" scoped>
.mint-swipe{
    height: 250px;
    // 第一种
    // .mint-swipe-item:nth-child(1){
    //     background-color: aqua;
    // }
    // .mint-swipe-item:nth-child(2){
    //     background-color: rgb(30, 87, 87);
    // }
    // .mint-swipe-item:nth-child(3){
    //     background-color: rgb(161, 45, 99);
    // }

    //  第二种
     .mint-swipe-item{
    //     &:nth-child(1){
    //         background-color: aqua; 
    //     }
    //      &:nth-child(2){
    //         background-color: pink; 
    //     }
    //      &:nth-child(3){
    //         background-color: orange; 
    //     }
    text-align: center;
        img{
         /*  width:100%; */
          height:100%
        }
    }
}
.full{
    width:100%;
}
</style>